<style >
.p_b{display: block;height: 24px;padding-left: 0px;width:50%;float:left;
position: relative;}
.p_b > div {width: 15px;display: inline-block;}
.p_b span{min-width: 122px;display: inline-block;}
.div_u1{padding:0px 10px;height: 24px;}
.p_b1{width:33%;}
.p_berror{color:#c42d17;font-weight: bold;}
.p_besuc{color:#17c455;font-weight: bold;}
.p_besuc >div {opacity: 0;}
.div_u1 .ivu-tooltip-popper{position: absolute !important;margin-left:-14px;}
.div_u1 .ivu-tooltip-inner{max-width: 400px;min-width: 60px;}
</style>
<template>
<div>
     <Modal v-model="modal" :title="title" :styles="{width:'1000px',top:'20px'}">
        
        <div class="div_u1">
            <div class="p_b " :class="contrata('invoiceCode')">
                <div>
                    <Tooltip :content="data.invoiceCode" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>发票代码:</span>{{obj.invoiceCode}}
                
            </div>
            <div class="p_b" :class="contrata('invoiceNo')">
                <div>
                    <Tooltip :content="data.invoiceNo" placement="top-start" 
                    style="{position:'relative'}">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>发票号码:</span>{{obj.invoiceNo}}
            </div>
        </div>
        <div class="div_u1">
            <div class="p_b" :class="contrata('invoiceDate')">
                <div>
                    <Tooltip :content="data.invoiceDate" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>开票日期:</span>{{obj.invoiceDate}}
            </div>
            <div class="p_b" :class="contrata('invoiceCheckCode')">
                <div>
                    <Tooltip :content="data.invoiceCheckCode" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>校验码:</span>{{obj.invoiceCheckCode}}
            </div>
        </div>
        <div class="div_u1">
            <div class="p_b" :class="contrata('buyerName')">
                <div>
                    <Tooltip :content="data.buyerName" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>购买方名称:</span>{{obj.buyerName}}
            </div>
            <div class="p_b" :class="contrata('buyerTaxNo')">
                <div>
                    <Tooltip :content="data.buyerTaxNo" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>购买方纳税人识别号:</span>{{obj.buyerTaxNo}}
            </div>         
        </div>
        <div class="div_u1">
            <div class="p_b" :class="contrata('buyerAddressPhone')">
                <div>
                    <Tooltip :content="data.buyerAddressPhone" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>购买方地址、电话:</span>{{obj.buyerAddressPhone}}
            </div>
            <div class="p_b" :class="contrata('buyerBankAccount')">
                <div>
                    <Tooltip :content="data.buyerBankAccount" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>购买方开户行及帐号:</span>{{obj.buyerBankAccount}}
            </div>         
        </div>
        <div class="div_u1">
            <div class="p_b" :class="contrata('sellerName')">
                <div>
                    <Tooltip :content="data.sellerName" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>销售方名称:</span>{{obj.sellerName}}
            </div>
            <div class="p_b" :class="contrata('sellerTaxNo')">
                <div>
                    <Tooltip :content="data.sellerTaxNo" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>销售方纳税人识别号:</span>{{obj.sellerTaxNo}}
            </div>
        </div>
        <div class="div_u1">
            <div class="p_b" :class="contrata('sellerAddressPhone')" style="width:100%;">
                <div>
                    <Tooltip :content="data.sellerAddressPhone" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>销售方地址、电话:</span>{{obj.sellerAddressPhone}}
            </div>
        </div>
        <div class="div_u1">
            <div class="p_b" :class="contrata('sellerBankAccount')"  style="width:100%;">
                <div>
                    <Tooltip :content="data.sellerBankAccount" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>销售方开户行及帐号:</span>{{obj.sellerBankAccount}}
            </div>
        </div>
        <div class="div_u1">
            <div class="p_b p_b1" :class="contrata('payee')">
                <div>
                    <Tooltip :content="data.payee" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>收款人:</span>{{obj.payee}}
            </div>
            <div class="p_b p_b1" :class="contrata('checker')">
                <div>
                    <Tooltip :content="data.checker" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>复核:</span>{{obj.checker}}
            </div>
            <div class="p_b p_b1" :class="contrata('drawer')">
                <div>
                    <Tooltip :content="data.drawer" placement="top-start">
                        <Icon type="close-circled"></Icon>
                    </Tooltip>
                </div>
                <span>开票人:</span>{{obj.drawer}}
            </div>
        </div>
        <div class="ivu-table-wrapper" >
            <div class="ivu-table ivu-table-with-fixed-top ">
                
                <div class="ivu-table-body" >
                    <table class="table_border _table _authtab"  cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="" style="width:250px;">
                                    <div class="ivu-table-cell">
                                        <span>货物或应税劳务、服务名称</span>
                                    </div>
                                </th>
                                <th class="" style="width:100px;">
                                    <div class="ivu-table-cell">
                                        <span>规格型号</span>
                                    </div>
                                </th>
                                <th class="" style="width:100px;">
                                    <div class="ivu-table-cell">
                                        <span>单位</span>
                                    </div>
                                </th>
                                <th class="" style="widows: 10px;0px;">
                                    <div class="ivu-table-cell">
                                        <span>数量</span>
                                    </div>
                                </th>
                                <th class="" style="width:100px;">
                                    <div class="ivu-table-cell">
                                        <span>单价</span>
                                    </div>
                                </th>
                                <th class="" >
                                    <div class="ivu-table-cell">
                                        <span>金额</span>
                                    </div>
                                </th>
                                <th class="" style="width:80px;">
                                    <div class="ivu-table-cell">
                                        <span>税率</span>
                                    </div>
                                </th>
                                <th class="">
                                    <div class="ivu-table-cell">
                                        <span>税额</span>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="ivu-table-tbody">
                            <tr class="ivu-table-row"  v-for="(item,index) in obj.invoiceDetailList">
                                <td class="">
                                    <div class="ivu-table-cell " 
                                     :class="contrata('goodsName',index)">
                                        <div>
                                            <Tooltip 
                                            :content="data.invoiceDetailList[index].goodsName" placement="top-start">
                                                <Icon type="close-circled"></Icon>
                                            </Tooltip>
                                        </div>
                                        <span>
                                            {{item.goodsName}}
                                        </span>

                                    </div>
                                </td>
                                <td class="">
                                    <div class="ivu-table-cell" 
                                    :class="contrata('goodsSpecification',index)">
                                        <div>
                                            <Tooltip 
                                            :content="data.invoiceDetailList[index].goodsSpecification"
                                             placement="top-start">
                                                <Icon type="close-circled"></Icon>
                                            </Tooltip>
                                        </div>
                                        <span>{{item.goodsSpecification}}</span>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="ivu-table-cell" 
                                    :class="contrata('goodsUnit',index)">
                                        <div>
                                            <Tooltip 
                                            :content="data.invoiceDetailList[index].goodsUnit"
                                             placement="top-start">
                                                <Icon type="close-circled"></Icon>
                                            </Tooltip>
                                        </div>
                                        <span>{{item.goodsUnit}}</span>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="ivu-table-cell" 
                                    :class="contrata('goodsQuantity',index)">
                                        <div>
                                            <Tooltip 
                                            :content="data.invoiceDetailList[index].goodsQuantity"
                                             placement="top-start">
                                                <Icon type="close-circled"></Icon>
                                            </Tooltip>
                                        </div>
                                        <span>{{item.goodsQuantity }}</span>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="ivu-table-cell" 
                                    :class="contrata('goodsPrice',index)">
                                        <div>
                                            <Tooltip 
                                            :content="data.invoiceDetailList[index].goodsPrice"
                                             placement="top-start">
                                                <Icon type="close-circled"></Icon>
                                            </Tooltip>
                                        </div>
                                        <span>{{item.goodsPrice}}</span>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="ivu-table-cell" 
                                    :class="contrata('goodsTotalPrice',index)">
                                        <div>
                                            <Tooltip 
                                            :content="data.invoiceDetailList[index].goodsTotalPrice"
                                             placement="top-start">
                                                <Icon type="close-circled"></Icon>
                                            </Tooltip>
                                        </div>
                                        <span>{{item.goodsTotalPrice}}</span>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="ivu-table-cell" 
                                    :class="contrata('goodsTaxItem',index)">
                                        <div>
                                            <Tooltip 
                                            :content="data.invoiceDetailList[index].goodsTaxItem"
                                             placement="top-start">
                                                <Icon type="close-circled"></Icon>
                                            </Tooltip>
                                        </div>
                                        <span>{{item.goodsTaxItem}}</span>
                                    </div>
                                </td>
                                <td class="">
                                    <div class="ivu-table-cell"
                                    :class="contrata('goodsTotalTax',index)">
                                        <div>
                                            <Tooltip 
                                            :content="data.invoiceDetailList[index].goodsTotalTax"
                                             placement="top-start">
                                                <Icon type="close-circled"></Icon>
                                            </Tooltip>
                                        </div>
                                        <span>{{item.goodsTotalTax}}</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
        </div>

         <div slot="footer">
             <Button @click="cancel()"> 关闭</Button>
             <Button @click="succ()" type="primary" >验证通过</Button>
             <Button @click="fail()"  type="error" v-if="cons" >验证失败</Button>
         </div>
     </Modal>
</div>
</template>
<script>
 export default {
     data (){
         return {
             modal:false,title:'验证结果',cons:false,
             guid:'',
             data:{invoiceDetailList:[{}]},obj:{invoiceDetailList:[{id:1}]}
         }
     },methods:{
         showdata(params){
            console.log(params);
            this.cons=false;
            this.guid=params.guid;
            this.obj=params.orgInvoice || {} ;
            this.data=params.checkInvoice || {};
            this.modal=true;
            // setTimeout(()=>{
            //     this.cons=false;
            //     this.$set(this.obj,Object.assign({},params.orgInvoice))
            //     this.$set(this.data,Object.assign({},params.checkInvoice));
            //     //this.obj=params.orgInvoice;
            //     //this.data=params.checkInvoice;
            // },300)
            
            
         },
         cancel(){
             this.modal=false;
         },succ(){
            if(this.cons){
                this.$Modal.confirm({
                     title:'提示',
                     content: '<p>数据查验有差异，确定通过？</p>',
                     //loading:true,
                     onOk:()=>{
                        this.axios.post('/incomeinvoice/validateResult',
                            {invoiceGuid:this.guid,invoiceType:'income',result:1}).then((res)=>{
                                console.log(res);
                            if(res.errorCode==0){
                                this.$Message.success(res.message);
                            }
                            this.$emit('refresh');

                            this.modal=false;
                        })
                        
                    }
                })
            }else{
                this.axios.post('/incomeinvoice/validateResult',
                    {invoiceGuid:this.guid,invoiceType:'income',result:1}).then((res)=>{
                    if(res.errorCode==0){
                                this.$Message.success(res.message);
                    }
                    this.$emit('refresh')
                    this.modal=false;
                })
            }
            
         },fail(){
            this.axios.post('/incomeinvoice/validateResult',
                {invoiceGuid:this.guid,invoiceType:'income',result:2}).then((res)=>{
                    console.log(res);
                    if(res.errorCode==0){
                        this.$Message.success(res.message);
                    }
                    this.$emit('refresh');

                    this.modal=false;
            })
         },contrata(key,index){
            //console.log(key,index);
            var a;

            if(index!=undefined){
                a= this.obj.invoiceDetailList[index][key]!=this.data.invoiceDetailList[index][key]
            }else{
                a= this.obj[key]!=this.data[key]
            }
            if(this.cons==false && a){
                this.cons=true;
            }
            return a?{p_berror:true}:{p_besuc:true};
         }
     },created(){
         this.$bus.on('bus_authsedit', this.showdata);
         
     },beforeDestroy(){
         this.$bus.off('bus_authsedit',this.showdata)
     }
 }
</script>
